<template>
  <div class="category">
    <header>
      <div class="search">
        <div class="log">
          <img src="../../public/images/img/arrow_left.png" alt="" />
        </div>
        <div class="sear">
          <i class="iconfont">&#xe600;</i>
          <span>搜索商品/店铺/种类</span>
        </div>
        <div class="cai">
          <img src="../../public/images/img/menu.png" alt="" />
        </div>
      </div>
    </header>
    <nav>
      <div class="list">
        <div class="ul">
          <div class="item con">图书</div>
          <div class="item">童书</div>
          <div class="item">电子书</div>
          <div class="item">手机数码</div>
          <div class="item">创意文具</div>
          <div class="item">电脑办公</div>
          <div class="item">女装</div>
          <div class="item">食品</div>
          <div class="item">童装童鞋</div>
          <div class="item">男装</div>
          <div class="item">运动户外</div>
          <div class="item">母婴玩具</div>
          <div class="item">家用电器</div>
          <div class="item">厨房用品</div>
        </div>
      </div>
      <div class="box">
        <div class="img">
          <img src="../../public/images/img/国庆放假.jpg" alt="" />
          <ol>
            <li class="con"></li>
            <li></li>
          </ol>
        </div>
        <div class="banner">
          <div class="lf">
            <div class="txt">
              <h2>进入当当书城</h2>
              <p>特价低至1.9折</p>
            </div>
            <img src="../../public/images/img/pits_arrow.png" alt="" />
          </div>
          <div class="lf">
            <div class="txt">
              <h2>进入童书馆</h2>
              <p>精选少儿读物</p>
            </div>
            <img src="../../public/images/img/pits_arrow.png" alt="" />
          </div>
        </div>
        <div class="picture">
          <h3>榜单</h3>
          <div class="pic">
            <div class="item">
              <div class="img">
                <img src="../../public/images/img/pic.png" alt="" />
              </div>
              <div class="txt">总榜</div>
            </div>
            <div class="item">
              <div class="img">
                <img src="../../public/images/img/pic.png" alt="" />
              </div>
              <div class="txt">总榜</div>
            </div>
            <div class="item">
              <div class="img">
                <img src="../../public/images/img/pic.png" alt="" />
              </div>
              <div class="txt">总榜</div>
            </div>
          </div>
        </div>
        <div class="novel">
          <div class="title">
            <h3>
              小说<img src="../../public/images/img/pits_arrow.png" alt="" />
            </h3>
            <span
              >畅销版<img
                src="../../public/images/img/ddcategory_more_icon.png"
                alt=""
            /></span>
          </div>
          <div class="text">
            <div class="item">
              <span>社会</span>
              <i>|</i>
              <span
                >侦探/悬疑/推理
                <div class="hot"></div
              ></span>
              <i>|</i>
              <span>情感</span>
            </div>
            <div class="item">
              <span>世界名著</span>
              <i>|</i>
              <span>历史</span>
              <i>|</i>
              <span
                >展开<img
                  src="../../public/images/img/ddcategory_arrow-new.png"
                  alt=""
              /></span>
            </div>
          </div>
        </div>
        <div class="novel">
          <div class="title">
            <h3>
              文学<img src="../../public/images/img/pits_arrow.png" alt="" />
            </h3>
            <span
              >畅销版<img
                src="../../public/images/img/ddcategory_more_icon.png"
                alt=""
            /></span>
          </div>
          <div class="text">
            <div class="item">
              <span
                >中国现当代随笔
                <div class="hot"></div
              ></span>
              <i>|</i>
              <span>名家作品</span>
              <i>|</i>
              <span>文集</span>
            </div>
            <div class="item">
              <span>纪实文学</span>
              <i>|</i>
              <span>中国古诗词</span>
              <i>|</i>
              <span
                >展开<img
                  src="../../public/images/img/ddcategory_arrow-new.png"
                  alt=""
              /></span>
            </div>
          </div>
        </div>
      </div>
    </nav>

    <footer-nav></footer-nav>
  </div>
</template>

<script>
import FooterNav from '../components/FooterNav.vue';
export default {
  components: { FooterNav },};
</script>

<style lang="scss" scoped>
.category {
  .search {
    height: 44px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    box-sizing: border-box;
    .log {
      width: 40px;
      height: 39.5px;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 10px;
        height: 17px;
      }
    }
    .cai {
      width: 40px;
      height: 39.5px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 8px;
      img {
        width: 21px;
        height: 7px;
      }
    }
    .sear {
      height: 30px;
      flex: 1;
      background-color: #e8ecf0;
      border-radius: 25px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      i {
        width: 14px;
        height: 14px;
        display: block;
        margin: 0 9px;
        font-weight: bold;
        color: #767b83;
      }
      span {
        color: #999999;
        font-size: 14px;
      }
    }
  }
  nav {
    display: flex;
    border-top: 1px solid #eaedf0;
    justify-content: space-between;
  }
  .list {
    background: white;
    width: 21.4%;
    .ul {
      width: 100%;
      display: flex;
      flex-direction: column;
    }
    .item {
      height: 45px;
      font-size: 14px;
      line-height: 45px;
      text-align: center;
      color: #484848;
    }
    .con {
      color: #e5473a;
      background-color: #eff4fa;
    }
  }
  .box {
    width: 78.6%;
    background-color: #eff4fa;
    padding-left: 8px;
    .img {
      width: 100%;
      position: relative;
      img {
        width: 100%;
        display: block;
      }
      ol {
        position: absolute;
        bottom: 7px;
        right: 10px;
        display: flex;
        li {
          width: 7px;
          height: 7px;
          margin-left: 4px;
          border-radius: 50%;
          background-color: #fff;
        }
        .con {
          background-color: #f44c66;
        }
      }
    }
  }
  .banner {
    padding-top: 8px;
    display: flex;
    justify-content: space-between;
    .lf {
      padding: 13px 35px 13px 13px;
      background-color: #fff;
      width: 49%;
      box-sizing: border-box;
      position: relative;
      h2 {
        color: #212121;
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 3px;
      }
      img {
        width: 5px;
        height: 8px;
        position: absolute;
        right: 16px;
        top: 45%;
      }
      p {
        color: #a6a6a6;
        font-size: 12px;
      }
    }
  }
  .picture {
    background-color: #fff;
    margin-top: 8px;
    h3 {
      padding-top: 7px;
      margin-left: 14px;
      color: #1e1e1e;
      font-weight: 700;
      font-size: 13px;
      height: 28px;
      line-height: 28px;
    }
    .pic {
      padding: 0 6px 2px;
      display: flex;
      .item {
        padding: 8px 6px 2px;
        .img {
          padding: 0 6px 2px;
          height: 81px;
          img {
            width: 90%;
            height: auto;
            display: block;
          }
        }
        .txt {
          height: 26px;
          margin-top: 6px;
          color: #4d525d;
          font-size: 12px;
          text-align: center;
        }
      }
    }
  }
  .novel {
    margin-top: 8px;
    background-color: #fff;

    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
       h3 {
      padding-top: 7px;
      margin-left: 14px;
      color: #1e1e1e;
      font-size: 13px;
      font-weight: 700;
      display: flex;
      align-items: center;
      height: 28px;
    }
      img {
        width: 5px;
        height: 8px;
        margin-left: 5px;
      }
      span {
        font-size: 12px;
        color: #969696;
        margin-right: 12px;
        display: flex;
        align-items: center;
      }
    }
    .text {
      padding: 0 14px;
      .item {
        padding: 2px;
        color: #4d525d;
        font-size: 12px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #f0f0f0;
        span {
          width: 30%;
          text-align: center;
          position: relative;
          img {
            width: 12px;
            height: 12px;
            margin-left: 5px;
            transform: translateY(20%) rotate(180deg);
          }
          .hot {
            position: absolute;
            width: 22px;
            height: 14px;
            top: -5px;
            right: 0;
            background: url(../../public/images/img/icon_hot.png) no-repeat;
            background-size: 100%;
          }
        }
        i {
          color: #ccc;
        }
      }
    }
  }
}
</style>